<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { storeToRefs } from "pinia";
import type { PageParams } from "@/types/homeTypes/homeTypes.ts";
import useWidth from "@/hooks/useWidth.ts";
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";
import DoctorCard from "@/views/home/components/followDoctor/DoctorCard.vue";

const homeStore = useHomeStore();

const { medicList } = storeToRefs(homeStore);

const { width } = useWidth(375, 667);


const pageParams = reactive<PageParams>({ current: 1, pageSize: 5 });

const followSuccess = () => {
   // homeStore.fetchMedicList(pageParams);
};

onMounted(() => {
   homeStore.fetchMedicList(pageParams);
});

</script>

<template>
   <div class="follow-doctor">
      <div class="head">
         <p>推荐关注</p>
         <a> 查看更多<i class="van-icon van-icon-arrow" /></a>
      </div>
      <div class="body">
         <van-swipe class="my-swipe" :show-indicators="false" :loop="false" :width="(150/375)*width">
            <van-swipe-item v-for="(item,index) in medicList.rows" :key="index">
               <DoctorCard :doctor="item" @followSuccess="followSuccess"></DoctorCard>
            </van-swipe-item>
         </van-swipe>
      </div>
   </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
   background-color: var(--cp-bg);
   padding-bottom: 20px;

   .head {
      display: flex;
      justify-content: space-between;
      height: 45px;
      align-items: center;
      padding: 0 15px;
      font-size: 13px;

      > a {
         color: var(--cp-tip);
      }
   }

   .body {
      width: 100%;
      overflow: hidden;
   }
}
</style>
